<template>
  <div>
    <el-dialog
      :title="title"
      :visible="showDialog"
      @open="open"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="addForm" label-width="100px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input
            v-model="form.code"
            autocomplete="off"
            :disabled="title == '编辑部门'"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select v-model="form.manager" placeholder="请选择负责人">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="form.introduce" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDepartment,
  addDepartment,
  updateDepartment
} from '@/api/departments.js'
import { getEmployeesList } from '@/api/employees.js'
export default {
  // showDialog: 控制新增面板的显示与隐藏(父传子)
  //   currentData: 父组件传过来的当前父组件的全部部门信息
  props: ['showDialog', 'currentData', 'title'],
  data () {
    return {
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      userList: [], // 保存负责人信息
      //   校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '部门名称长度为 1 - 50 位',
            trigger: 'blur'
          },
          {
            validator: async (rule, value, callback) => {
              // 自定义校验规则, value: 要校验的数据  callback: 成功callback()  失败callback(new Error('提示信息'))
              // 先获取组织架构里所有部门
              let res = await getDepartment()
              /* //   根据 id 获取所有同级部门
              let partArr = res.data.data.depts.filter(item => {
                return item.pid === this.currentData.id
              })
              //    遍历同级部门，判断部门名称是否重复
              let bool = partArr.some(item => {
                return item.name === value
              })
              // 根据 返回值判断是否重复
              bool ? callback(new Error('部门名称不允许重复')) : callback() */

              //   简写
              if (!this.form.id) {
                //  表示为新增的表单校验
                res.data.data.depts.some(item => {
                  return item.name === value && item.pid === this.currentData.id
                })
                  ? callback(new Error('部门名称不允许重复'))
                  : callback()
              } else {
                // 表示为编辑的表单校验
                res.data.data.depts.some(item => {
                  // 编辑时需将本身给排除在判断有没有重复
                  return (
                    item.name === value &&
                    item.pid === this.currentData.pid &&
                    item.id !== this.form.id
                  )
                })
                  ? callback(new Error('部门名称不允许重复'))
                  : callback()
              }
            },
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '部门编码长度为 1 - 50 位',
            trigger: 'blur'
          },
          {
            validator: async (rule, value, callback) => {
              let res = await getDepartment()
              // 新增部门表单验证
              if (this.title == '新增部门') {
                res.data.data.depts.some(item => {
                  return item.code === value
                })
                  ? callback(new Error('部门编码不允许重复'))
                  : callback()
              } else {
                // 编辑部门无需验证(已禁止修改部门编码)
              }
            },
            trigger: 'blur'
          }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门描述不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 300,
            message: '部门描述长度为 1 - 300 位',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    closeDialog () {
      this.$emit('hideDiglog')
      this.form = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
      if (this.title == '新增部门') {
        // 重置校验规则
        this.$refs.addForm.resetFields()
      }
    },
    // 提交新增数据
    submitData () {
      // 先进行全局验证
      this.$refs.addForm.validate(async val => {
        if (val) {
          // 验证通过
          if (this.title == '新增部门') {
            // 新增部门
            if (this.currentData.pid == '-1') {
              // 表示为最大的需要添加子部门
              await addDepartment({
                ...this.form,
                pid: ''
              })
            } else {
              // 表示为其他子部门的需要添加子部门
              await addDepartment({
                ...this.form,
                pid: this.currentData.id
              })
            }
            // 提示新增成功
            this.$message.success('新增部门成功')
          } else {
            // 编辑部门
            await updateDepartment({
              ...this.form
            })
            // 提示修改成功
            this.$message.success('部门修改成功')
          }
          // 关闭面板并更新数据
          this.$emit('updateClose')
          // 清空数据
          this.form = {
            name: '',
            code: '',
            manager: '',
            introduce: ''
          }
        } else {
          console.log('验证失败')
        }
      })
    },
    // 获取负责人列表
    async getUserList () {
      let res = await getEmployeesList()
      this.userList = res.data.data
    },
    open () {
      if (this.title == '编辑部门') {
        this.form = { ...this.currentData }
      }
    }
  },
  created () {
    this.getUserList()
  }
}
</script>

<style></style>
